<template>
	<view class="whole">
		<!-- 头部 (Header Section) -->
		<view class="custom-navbar">
			<view class="left">
				<!-- 返回按钮 -->
				<image class="iconfont icon-xiangzuojiantou" @click="goBack"></image>
			</view>
			<view class="center">{{ title }}</view>
			<view class="right">
				<!-- 搜索按钮 -->
				<image class="iconfont icon-sousuo" @click="handleSearch"></image>
			</view>
		</view>

		<!-- 主内容区域 (Main Content Area) -->
		<scroll-view class="content" :scroll-y="true">
			<!-- 博客标题展示 -->
			<view class="postTitle"><text>{{ blog.postTitle }}</text></view>

			<!-- 用户展示 -->
			<view class="postMsg">
				<view class="userDisplay">
					<!-- 用户头像 -->
					<!-- 用户头像，使用 <image> 标签 -->
					 <image 
					      class="profile" 
					     :src="authorInfo.userAvatar" 
					      mode="aspectFill" 
					      @error="onImageError"
					  ></image>
					<view class="text">
						<!-- 用户名和博客类型 -->
						<view class="username">{{ blog.username }}</view>
						<view ><view class="postType">{{ blog.postType }}</view></view>
					</view>
					<!-- 关注按钮 -->
					<button class="focus" v-if="!(authorInfo.userId===userId)" @click="changeFollow">{{ blog.isFocused ? '已关注' : '关注' }}</button>
				</view>
				<!-- 阅读数 -->
				<view class="read"><text>{{ blog.viewCount}}人阅读</text></view>
			</view>
               
			<view class="bologContent">
			<!-- 博客内容展示 -->
			<rich-text :nodes="blog.postContent" ></rich-text>
			</view> 
			<!-- 标签展示 -->
			<view class="tag-list">
				<!-- 遍历展示标签 -->
				<view class="tag-item" v-for="(tag, index) in blog.blogTags" :key="index" @click="goToTag(tag)">
					{{ tag }}
				</view>
			</view>

			<!-- 相关博客展示 -->
			<view class="relatedBlog">
				<view class="relatedHeader">
					<view class="text">相关推荐</view>
					<!-- 更多相关博客按钮 -->
					<view class="more">更多<image class="iconfont icon-xiangyoujiantou" @click="moreRelatedBlog"></image></view>
				</view>
				<view class="relatedBlogList">
					<!-- 如果有相关博客 -->
					<view v-if="relatedBlogs.length > 0">
						<view class="relatedBlog" v-for="(blog, index) in relatedBlogs" :key="blog.id" @click="goBlogDisply(blog.id)">
							<view class="relatedBlogShow">
								<view class="blogText">
									<view class="text" :class="{ fullWidth: !blog.pictureImg }">
										<!-- 相关博客标题和简介 -->
										<view class="blogTitle">{{ blog.postTitle }}</view>
										<view class="blogIntroduce">{{ blog.postIntroduce }}</view>
									</view>
									<!-- 相关博客图片 -->
									<view class="picture" v-if="blog.pictureImg  " :style="{ backgroundImage: 'url(' + blog.pictureImg + ')' }"></view>
								</view>
								<view class="blogMsg">
									<view class="username">{{ blog.username }}</view>
									<view class="read">{{ blog.viewCount }} 阅读</view>
									<view class="commentCount">{{ blog.commentCount }} 评论</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 如果没有相关博客 -->
					<view class="noRelatedBlog" v-else>
						<text>暂无相关推荐</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 收藏成功提示框 (弹出层) -->
		<view v-if="showCollectModal" class="collect-modal">
		  <view class="collect-modal-content">
		     <view class="left">
		          <view class="title">收藏成功</view>
		          <view class="folder">已收藏到 <span>{{ selectedFolder }}</span></view>
		        </view>
		        <!-- 右侧区域 -->
		        <view class="right" @click="openFolderSelection">
		          <text class="change-text">更改</text>
		          <image class="iconfont  icon-xiangyoujiantou arrow" ></image>
		        </view>
		  </view>
		</view>
		
		<!--更改收藏夹或新建收藏夹-->
		<view  :class="['modal-background', { 'fade-out':  !isShowFolderSelection, 'fade-in': isShowFolderSelection}]" ></view>
		<view  :class="['modal', { 'slide-in': isShowFolderSelection, 'slide-out': !isShowFolderSelection }]" @click="closeFolderSelection" >
			<view class="modal-content" @click.stop >
					<view class="header">
						 <image  class="iconfont icon-cuowu2 "  @click="closeFolderSelection" ></image>
						  <text class="modal-title">选择收藏夹</text>
						 <view class="newly-built-button" @click="newlyBuilt">新建</view>
					</view>
					 <!-- 滑动内容区域 -->
					<view class="folder-list-container">
						<dynamic-list-xhd
							class="list"
							:itemList="folders"
							:viewHeight="viewHeight"
							:itemHeight="60"
							:loadCount="loadCount" 
							:fetchData="searchFavorites"
							:startRefreshOnce="fetchDataOnce"
					    >										
						<template v-slot:item="{ item }" >
							<view class="folder-item">
							   <view class="left">
									<view class="folder-header">
									    <view class="folder-info">
									      <view class="folder-name">{{ item.name }}</view>
									      <view class="default-tag" v-if="item.isDefault">默认</view>
									    </view>
									</view>
									
									<view class="folder-details">
									  <view class="folder-content">内容: {{ item.contentCount }} 项</view>
									  <view class="visibility-status">{{ item.visibility === 1 ? '公开' : '私密' }}</view>
									</view>
								</view>
								<view class="right">																					
									<view class="select-icon" @click="toggleSelection(item.id)">
									  <image 
									    :src="item.selected ? '/static/img/round_check.png' : '/static/img/round.png'" 
									    class="icon" 
									  />
									</view>
								</view>
							</view>
						</template>
									
					</dynamic-list-xhd>
					</view>
					 <!-- 完成按钮 -->
					<view class="finish-button" @click="finishSelection">完成</view>
			 </view>
		</view>
		<!--新建文件夹的窗口-->
		<view  :class="['create-folder-modal-background', { 'fade-out':  !isCreatingFolder, 'fade-in': isCreatingFolder}]"  ></view>
		<!-- 新建文件夹窗口 (可以根据需要进一步完善) -->
		<view  :class="['create-folder-modal', { 'slide-in': isCreatingFolder, 'slide-out': !isCreatingFolder }]" @click="closeNewlyBuiltModal">
		    <view class="create-folder-content" @click.stop>
				<view class="header">
					<image  class="iconfont  icon-cuowu2 "  @click="closeNewlyBuiltModal" ></image>
					 <text class="modal-title">新建收藏夹</text>
					<view class="save-button" @click="saveFolder">保存</view>
				</view>
				
				<view class="folder-name-container">
				  <!-- 文件夹名称输入框 -->
				  <input v-model="newFolderName" class="folder-name-input" placeholder="请输入文件夹名称" maxlength="15" />
				  <!-- 文件夹名称字符数 -->
				  <view class="char-count">{{ newFolderName.length }}/15</view>
				</view>
				
				 <!-- 文件夹描述输入框 -->
				  <view class="folder-description-container">
				    <textarea v-model="folderDescription" class="folder-description-input" placeholder="请输入文件夹描述(选填)" maxlength="200"></textarea>
				    <view class="description-count">{{ folderDescription.length }}/200</view>
				  </view>
				  
				  <view class="public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">公开</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>
				  </view>
				  
				  <view class="no-public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">私密</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="!isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
				  
				  <view class="default">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">默认</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleDefault">
				      <image 
				        :src="isDefault ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
				  
				  
		    </view>
		</view>
		
		<!-- 底部导航栏 (Bottom Navigation Bar) -->
		<view class="bottom-navigation-bar">
			<view class="likeAndDislike">
				<!-- 点赞区域 -->
				<view class="like" @click="toggleLike" v-if="blog.isLiked != 2">
					<image class="iconfont icon-renke" :class="{ liked: blog.isLiked === 1 }"></image>
					赞 {{ blog.likeCount === 0 ? '' : blog.likeCount }}
				</view>
				<!-- 分割线 (仅在未点赞时显示) -->
				<view class="divider" v-if="blog.isLiked === 0"></view>
				<!-- 踩区域 -->
				<view class="disLike" v-if="blog.isLiked != 1" @click="toggleDislike">
					<image class="iconfont icon-burenke" :class="{ disliked: blog.isLiked === 2 }"></image>
				</view>
			</view>
			<!-- 评论区域 -->
			<view class="comment">
				<image class="iconfont icon-pinglun1" @click="openCommentModal"></image>
				<view class="count">{{ blog.commentCount === 0 ? '评论' : blog.commentCount }}</view>
			</view>
			<!-- 收藏区域 -->
			<view class="collect" @click="toggleCollect">
				<image class="iconfont icon-shoucangjia1" :class="{ 'active': blog.isCollected, 'success': animationTriggered }"></image>
				<view class="count">{{ blog.collectCount === 0 ? '收藏' : blog.collectCount }}</view>
			</view>
			<!-- 分享区域 -->
			<view class="share">
				<image class="iconfont icon-fenxiang"></image>
				<view class="count">{{ blog.shareCount === 0 ? '分享' : blog.shareCount }}</view>
			</view>
		</view>

		<!-- 评论区域 -->
		<view>
			<comment-section-xhd
				:fetchComments="fetchComments"
				@remove-comment="removeComment"
				:handleNetworkLike="handleNetworkLike"
				:handleNetworkDislike="handleNetworkDislike"
				@closeModal="closeModal"
				@addComment="addComment"
				:myInfo="myInfo"
				:authorInfo="authorInfo"
				:comments="comments"
				:commentCount="commentCount"
				:loadCount="loadCount"
				:showCommentModal="showCommentModal"
				:fetchNetworkReplyComments="fetchNetworkReplyComments"
				class="comment-section"
			></comment-section-xhd>
		</view>
	</view>
</template>

<script>
import request from "../../utils/request.js";
import file from "../../utils/file.js";
import method from '@/utils/methods.js';
export default {
  data() {
    return {
      title: '博客', // 页面标题
	  userId:undefined,
	  token:undefined,
	  viewHeight:0,
	  loadCount:10,
	  offset:0,
	  fetchDataOnce:false,
	  folders: [                     // 模拟的一些文件夹数据
	          { id: 1, name: '收藏夹1', isDefault: true, contentCount: 10, visibility: 1, selected: false },
	          { id: 2, name: '收藏夹2', isDefault: false, contentCount: 5, visibility: 0, selected: false },
	         { id: 3, name: '收藏夹3', isDefault: false, contentCount: 7, visibility: 1, selected: false },
	        ],
	  imgRegex:/<img[^>]*\s+src="([^"]*)"\s+[^>]*data-custom="storageFileName=([^"]*)"/g,
	  defaultProfileImg: '/static/img/default-avatar.jpeg',
	   showCollectModal: false,  // 控制收藏成功提示框的显示
	   selectedFolder: '默认收藏夹',  // 当前选择的文件夹
	   isShowFolderSelection:false,
	   isCreatingFolder:false,
	   newFolderName:'',
	   folderDescription:'',
	    isPublic: true,  // 默认选择“公开”
		isDefault:false,
		defaultUserFolder:undefined,
		countUserCollectedPost:0,
      // 博客数据
    blog: {
        id: 1,
        username: "余小平", // 博主用户名
        postTitle: "学习Java开发，加入海东之家", // 博文标题
        postIntroduce: "yuxiaoping是人机，yuxiaoping是人机，yuxiaoping是人机，yuxiaoping是人机。", // 博文介绍
        postContent: '<p><img src="blob:http://localhost:8080/0424944e-10bd-49e2-a8cc-876433919d31"><img src="blob:http://localhost:8080/569f524b-2358-479b-991c-727e23e08db3"></p><p><br></p><p><br></p>', // 博文内容（包含 HTML）
      //  profileImg: "../../static/img/test.jpg", // 用户头像
       // pictureImg: "../../static/img/test.jpg", // 博文图片
        commentCount: 1220, // 评论数量
        viewCount: 10, // 阅读量
        likeCount: 5, // 点赞数
        collectCount: 8, // 收藏数
        shareCount: 1200, // 分享数
        isLiked: 0, // 是否已点赞 (0: 未点赞, 1: 点赞, 2: 不喜欢)
        isCollected: true, // 是否已收藏
        postType: '原创', // 博文类型
        isFocused: true, // 是否已关注
        blogTags: ['java', 'C语言', 'redis'], // 博客标签
      },
      animationTriggered: false, // 动画是否触发
     relatedBlogs: [],
    authorInfo: { // 博主信息
        userId: 1,
        username: "徐海东",
        userAvatar:'',
        userIp: '火星',
      },
    myInfo: { // 当前用户信息
        userId: 2,
        username: "yu",
        userAvatar: "../../static/img/test.jpg",
        userIp: '火星',
      },
    comments: [ // 评论数据
        {
          id: 1,
          parentId: null, // 父级评论ID
          replyToId: 1, // 被回复评论ID
          replyToName: '徐海东', // 被回复人名称
          userId: 1,
          username: '徐海东1',
          profileImage: "../../static/img/test.jpg", // 评论者头像
          isLiked: 0,
          likesCount: 0,
          commentText: "垃圾文章...", // 评论内容
          replyCount: 130,
          createdAt: '2024-2-20 6:32:09',
          userIp: '火星',
        },
        {
          id: 2,
          parentId: null,
          replyToId: 1,
          replyToName: '徐海东',
          userId: 2,
          username: 'yu',
          profileImage: "../../static/img/test2.jpg",
          isLiked: 1,
          likesCount: 5,
          commentText: "这篇文章写得不错，我觉得很有见地！",
          replyCount: 15,
          createdAt: '2024-2-21 10:15:00',
          userIp: '火星',
        },
      ],

      loadCount: 10, // 评论加载数量
      showCommentModal: false, // 是否显示评论模态框
      commentCount: 120, // 评论总数
    };
  },
  
 async onLoad(options) {
	 this.userId = uni.getStorageSync("UID");
	 this.token = uni.getStorageSync("token");
	 console.log("用户:-----token "+this.userId,this.token);
	 // if(this.userId &&this.token){
		//  this.isInteractived=true;
	 // }
	//传递博客id
	if(options.id){
		const blogId = options.id;
		console.log('接收到的博客 ID:', blogId);
		//查询博客所有相关数据
		await this.fetchBlogData(blogId);
		this.calculateViewHeight();
		//加载头像图片
		await this.loadProfileImage();
		//加载博客图片
		await this.loadHtmlImg();
		//加载相关博客的图片
		await this.updateRelatedBlogsWithCover();
		//console.log("阅读量: "+this.blog.viewCount);
		return;
	}
	uni.showToast({
	      title: '博客不存在',
	      icon: 'error',
		  duration:1000
	 });
	 setTimeout(() => {
	   uni.navigateBack();
	 }, 1000);
  },
  async mounted() {
  },
  computed: {
    buttonFocusText() {
      return this.blog.isFocused ? '已关注' : '关注'; // 根据关注状态返回按钮文本
    },
  },
  methods: {
	calculateViewHeight() {
	    this.$nextTick(() => {
	        const query = uni.createSelectorQuery().in(this);
	        // 获取 index-header-xhd 的高度
	        query.select('.folder-list-container').boundingClientRect(headerData => {
	            this.viewHeight =headerData ? headerData.height : 0 ;
	            console.log('可用高度:', this.viewHeight);
	        }).exec();
	    });
	},
	async saveFolder(){
		//保存文件夹
		try{
			//查询blog草稿的设置
			let data={
				 userId:this.userId,
				 newFolderName:this.newFolderName,
				 isDefault:this.isDefault,
				 isPublic:this.isPublic,
				 folderDescription:this.folderDescription
				 // folderList:folderList
			}
			 let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"newFavorites",data,"/post/newFavorites");
			 console.log("处理新建收藏夹的数据",result);
			 if(result){
			 	if(result.code===1){
			 		const data=result.data;
			 		if(data!=undefined){
					let newFolder={
						id: data.folderId,
						name: data.folderName, 
						isDefault: data.isDefault!=null,
						contentCount: 0, 
						visibility: data.visibility,
						selected: false
					}
					
					    if(data.isDefault!=null){
							this.defaultUserFolder = {
							    id: data.folderId,
								name: data.folderName,
								isDefault: true,
								visibility: data.visibility, 
							    folderDesc: data.folderDesc===null?'':data.folderDesc,
							    lastUpdate: data.lastUpdate
							};
						}
						if(newFolder.isDefault){
							this.folders.forEach(folder => {
							        if (folder.isDefault) {
							          folder.isDefault = false; // 将 isDefault 改为 false
							        }
							});
							 this.folders.unshift(newFolder);
						}else{
						 this.folders.splice(1, 0, newFolder); // 在第二个位置插入新元素
						}
						this.closeNewlyBuiltModal();
						//this.isCreatingFolder=false;
						this.newFolderName='';
						this.folderDescription='';
						 this.isPublic= true;  // 默认选择“公开”
						this.isDefault=false;
						console.log(newFolder,this.defaultUserFolder);
					}else{
						uni.showToast({
						    title: "数据异常", // 提示的内容
						    icon: 'error',   // 提示的图标，'error' 表示错误图标
						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						});
					}
					
			 		}
					return;
			 	}else{
			 		if(result.error==='Unauthorized'){
			 			uni.showToast({
			 			    title: "还未登录", // 提示的内容
			 			    icon: 'error',   // 提示的图标，'error' 表示错误图标
			 			    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
			 			});
			 			
			 			// 设置 2 秒后跳转到登录页面
			 			setTimeout(() => {
			 			    uni.navigateTo({
			 			        url: "/pages/login/login"  // 跳转的页面路径
			 			    });
			 			}, 1000); // 设置延迟 2 秒后跳转
			 			return;
			 		}
				uni.showToast({
				       title:"新建收藏夹失败", // 使用 error.message 作为提示信息，若没有则使用默认提示
				       icon: 'error', // 使用 'error' 图标
				       duration: 2000 // 持续时间
				   });
				return;
			 }
			 uni.showToast({
			        title:"请求失败，请重试", // 使用 error.message 作为提示信息，若没有则使用默认提示
			        icon: 'error', // 使用 'error' 图标
			        duration: 2000 // 持续时间
			    });
		}catch (error) {
		   uni.showToast({
		          title: error.message || "新建收藏夹发生异常", // 使用 error.message 作为提示信息，若没有则使用默认提示
		          icon: 'error', // 使用 'error' 图标
		          duration: 2000 // 持续时间
		      });
		}
	},
	async handleBlogPictureCover(blogId) {
	    if (blogId) {
	        // 根据 blogId 构造封面图片的 URL
	        let url = this.baseUrl + "/file/" + blogId + "?type=cover";
	        
	        try {
	            // 发送请求获取封面图片
	            let result = await request.sendUniGetRequestByNetWork(blogId, undefined, url);
	
	            if (result && result.code === 1 && result.data) {
	                let coverImageResult = result.data;
	                if (coverImageResult && coverImageResult.imgType && coverImageResult.fileContent) {
	                    // 成功获取封面图片，生成图片 URL
	                    return file.generateImagUrl(coverImageResult.fileContent, coverImageResult.imgType);
	                }
	            }
	        } catch (error) {
	            console.error("获取封面图片失败", error);
	        }
	    }
	
	    // 如果没有获取到封面图片，则返回默认封面图片
	    return "/static/img/default_cover.jpeg";
	},
	async updateRelatedBlogsWithCover() {
	    for (let blog of this.relatedBlogs) {
	        // 异步获取封面图片
	        let coverImageUrl = await this.handleBlogPictureCover(blog.id);
	
	        // 将获取到的封面图片 URL 应用到 blog.pictureImg
	        blog.pictureImg = coverImageUrl;
	    }
	
	    // 调试输出，确认封面图片已更新
	   // console.log("相关博客列表:", this.relatedBlogs);
	},
	toggleDefault(){
		this.isDefault=!this.isDefault;
	},
	 toggleVisibility() {
	      // 切换公开/私密状态
	      this.isPublic = !this.isPublic;
	    },
	newlyBuilt(){
		this.isCreatingFolder=true;
	},
	closeNewlyBuiltModal(){
		console.log("新建页面关闭");
		this.isCreatingFolder=false;
	},
	toggleSelection(folderId) {
	      // 查找指定 id 的文件夹
	      const folder = this.folders.find(f => f.id === folderId);
	      
	      // 如果找到了文件夹，则切换选中状态
	      if (folder) {
	        folder.selected = !folder.selected;
	      }
	    },
	openFolderSelection(){
		this.isShowFolderSelection=true;
		this.fetchDataOnce=true;
		//console.log(this.fetchDataOnce);
	},
	closeFolderSelection(){
		this.isShowFolderSelection=false;
		this.offset=0;
		this.fetchDataOnce=false;
		//this.folders=[];
	},
	async loadHtmlImg(){
		try{
			const html=this.blog.postContent;
			 const currentImages = this.extractImages(html);
		    console.log("查找图片",currentImages);
			let imageReplaceData = [];
			const loadImagePromises = currentImages.map(async (item) => {
			         const storageFileName = item.storageFileName;
					 const res=this.splitFileName(storageFileName);
					 console.log("获取的字符",res,this.blog.id,res.baseName,this.blog.id==res.baseName);
					 if(res && res.baseName==this.blog.id){
						 // 异步加载图片
						 const result = await this.loadImage(res.extension);
						 if (result) {
						    const { key, src } = result;
						    console.log("生成的图片 key:", key);
						 	// 3. 收集替换数据
						 	imageReplaceData.push({ key, src });
						 } else {
						     console.log("图片加载失败或没有有效的数据");
						 }
				 }
			});
			 // 等待所有图片加载完成
			 await Promise.all(loadImagePromises);
			 console.log("替换的图片",imageReplaceData);
			let newHtml=this.replaceImageSrcInHtml(html,imageReplaceData);
			this.blog.postContent=newHtml;					
		}catch (error) {
		   console.error('博客图片加载失败:', error);
		}
	},
	replaceImageSrcInHtml(html, replacements) {
		 console.log("替换所有的src为为指定src");
	    // 正则表达式：匹配 img 标签，获取 src 和 data-custom 中的 storageFileName
	    const imgRegex = this.imgRegex;
	    let match;
	
	    console.log("传入替换的key-value:", replacements); // 输出所有需要替换的 key-value 对
	
	    // 遍历所有匹配的 img 标签
	    while ((match = imgRegex.exec(html)) !== null) {
	        const currentSrc = match[1]; // 获取当前 src
	        const storageFileName = match[2]; // 获取 storageFileName
	        console.log("当前匹配的图片：", match[0]);
	        // console.log("当前图片的 src:", currentSrc);
	         console.log("当前图片的 storageFileName:", storageFileName);
	
	        // 遍历 replacements 数组，检查是否存在对应的 storageFileName
	        for (let i = 0; i < replacements.length; i++) {
	           // const { storageFileName: replacementFileName, newSrc } = replacements[i];
			  // console.log(replacements[i]);
				 const key=replacements[i].key;
				 const newSrc=replacements[i].src;
	            // 如果 storageFileName 匹配，就替换 src
	            if (storageFileName === key) {
	              //  console.log("替换 src:", currentSrc);
	                // 替换 img 标签中的 src
	                html = html.replace(match[0], match[0].replace(`src="${currentSrc}"`, `src="${newSrc}"`));
	            }
	        }
	    }
	    // 返回替换后的 html
	    return html;
	},
	splitFileName(fileName) {
	  // 检查文件名格式是否合法，至少包含一个 `_` 和一个 `.`，并且最后一个 `_` 后面有数字和扩展名
	  const lastUnderscoreIndex = fileName.lastIndexOf('_'); // 找到最后一个 "_" 的位置
	  const dotIndex = fileName.lastIndexOf('.'); // 找到最后一个 "." 的位置
	  
	  // 如果没有 `_` 或者没有扩展名，返回 null
	  if (lastUnderscoreIndex === -1 || dotIndex === -1 || lastUnderscoreIndex > dotIndex) {
	    return undefined;
	  }
	  // 提取文件名的两部分
	  const baseName = fileName.substring(0, lastUnderscoreIndex); // 123456_1_190
	  const extension = fileName.substring(lastUnderscoreIndex + 1); // 1.jpg
	
	  // 进一步检查扩展名部分是否符合预期（例如，必须包含数字）
	  const extensionParts = extension.split('.');
	  if (extensionParts.length < 2 || isNaN(extensionParts[0])) {
	    return undefined;
	  }
	
	  return {
	    baseName: baseName,
	    extension: extension
	  };
	},
	extractImages(html) {
	    //console.log(html);
	    const images = [];
	  // const imgRegex = /<img[^>]*src="([^"]*)".*data-custom="storageFileName=([^"]+)".*data-local="([^"]*)"/g;
	    // 正则表达式：匹配 img 标签的 src 和 data-custom 属性中的 storageFileName
	    const imgRegex = this.imgRegex; 
	    let match;
	    while ((match = imgRegex.exec(html)) !== null) {
	        // 提取图片的 src 和 storageFileName
	        images.push({
	            src: match[1],                  // 图片的 src
	            storageFileName: match[2]       // 提取出来的 storageFileName
	        });
	    }
	    return images;
	},
	async  loadImage(fileName) {
		console.log(fileName);  // 输出 "1.jpg", "2.jpg" 等
		const url = `${this.baseUrl}/file/${this.blog.id}?type=postImg&fileName=${fileName}`;
		//console.log("请求的图片路径:", url);
		let result=await request.sendUniGetRequestByNetWork(this.userId,this.token,url);
		console.log("图片请求的数据:",result);
		if(result){
			if(result.code===1){
				let imgResult=result.data;
				if(imgResult){
					if(imgResult.imgType && imgResult.fileContent){
						const src=file.generateImagUrl(imgResult.fileContent,imgResult.imgType);
						const key = `${this.blog.id}_${fileName}`;
						//this.imgFileName.push(key);
						//this.imgMap[key] = src;
						// this.replaceImageSrcInHtml()
						// 返回 key 和 src
						 return { key, src };
					}
				}
			}
		}
		  return null;
     },
	async  loadProfileImage() {
		try{
	      	let url=this.baseUrl+"/file/"+this.authorInfo.userId+"?type=avatar";
	      	//console.log("头象",url);
	      	let result=await request.sendUniGetRequestByNetWork(this.userId,undefined,url);
	      	if(result){
	      		if(result.code===1){
	      			let profileImgResult=result.data;
	      			if(profileImgResult){
	      				if(profileImgResult.imgType && profileImgResult.fileContent){
	      					this.authorInfo.userAvatar=file.generateImagUrl(profileImgResult.fileContent,profileImgResult.imgType);
	      					return;
	      				}
	      			}
	      		}
	      	}
	      this.authorInfo.userAvatar=this.defaultProfileImg;
		  }catch(err){
			 uni.showToast({
			       title: "作者头像加载失败",
			       icon: 'error',
			 	  duration:1000
			  });
			  this.authorInfo.userAvatar=this.defaultProfileImg;
		  }
	},
	async fetchBlogData(blogId) {
		try {
		 const url = `${this.baseUrl}/post/getBlogData/${blogId}`;
		 //console.log("请求的图片路径:", url);
		 let result=await request.sendUniGetRequestByNetWork(this.userId,this.token,url);
		  console.log("加载的博客数据",result);
		   if(result){
			   if(result.code===1){
			   	const data=result.data;
				if(data.interactiveData!=undefined){
					const interactiveData=data.interactiveData;
					if(interactiveData!=undefined){
						
						if(interactiveData.isLike===null){
					    this.blog.isLiked=0;
						}else if(interactiveData.isLike===1){
							 this.blog.isLiked=1;
						}else{
							this.blog.isLiked=2;
						}
						this.blog.isFocused=interactiveData.isFollow;
					    this.blog.isCollected=interactiveData.isCollect!=null&&interactiveData.isCollect>0;
						if(interactiveData.isCollect>0){
						this.countUserCollectedPost=interactiveData.isCollect;
						}
						const userDefaultFolder=interactiveData.UserDefaultFolder;
						
						if(userDefaultFolder!=undefined){
							
							this.defaultUserFolder = {
							    id: userDefaultFolder.folderId,
								name: userDefaultFolder.folderName,
								isDefault: true,
								visibility: userDefaultFolder.visibility, 
							    folderDesc: userDefaultFolder.folderDesc ===null?'':data.folderDesc,
							    lastUpdate: userDefaultFolder.lastUpdate
							};
							console.log("默认的文件夹",this.defaultUserFolder);
						
							// { id: 1, name: '收藏夹1', isDefault: true, contentCount: 10, visibility: 1, selected: false }
						}
					}
					
					
				}
				
				
				if(data.authorName!=undefined  && data.blogDetail!=undefined){
					const blogDetail=data.blogDetail;
					this.blog.username=data.authorName;
					this.authorInfo.username=data.authorName;
					if(  blogDetail.blogType!=undefined &&blogDetail.content!=undefined && blogDetail.userId!=undefined
					&&blogDetail.favoriteCount!=undefined && blogDetail.likesCount!=undefined && blogDetail.postId!=undefined && blogDetail.readCount!=undefined
					&& blogDetail.shareCount!=undefined &&blogDetail.tags!=undefined && blogDetail.title!=undefined &&  blogDetail.userId!=undefined &&blogDetail.commentsCount!=undefined
					){
						this.authorInfo.userId=blogDetail.userId;
						
						// id: 1,
						//   username: "余小平", // 博主用户名
						//   postTitle: "学习Java开发，加入海东之家", // 博文标题
						//   postIntroduce: "yuxiaoping是人机，yuxiaoping是人机，yuxiaoping是人机，yuxiaoping是人机。", // 博文介绍
						//   postContent: '<p><img src="blob:http://localhost:8080/0424944e-10bd-49e2-a8cc-876433919d31"><img src="blob:http://localhost:8080/569f524b-2358-479b-991c-727e23e08db3"></p><p><br></p><p><br></p>', // 博文内容（包含 HTML）
						//   profileImg: "../../static/img/test.jpg", // 用户头像
						//   pictureImg: "../../static/img/test.jpg", // 博文图片
						//   commentCount: 1220, // 评论数量
						//   viewCount: 10, // 阅读量
						//   likeCount: 5, // 点赞数
						//   collectCount: 8, // 收藏数
						//   shareCount: 1200, // 分享数
						//   isLiked: 0, // 是否已点赞 (0: 未点赞, 1: 点赞, 2: 不喜欢)
						//   isCollected: true, // 是否已收藏
						//   postType: '原创', // 博文类型
						//   isFocused: true, // 是否已关注
						//   blogTags: ['java', 'C语言', 'redis'], // 博客标签
						// },
						// animationTriggered: false, // 动画是否触发
						this.blog.id=blogDetail.postId;
						this.blog.postTitle=blogDetail.title;
						this.blog.postIntroduce=blogDetail.blogDescribe;
						this.blog.postContent=blogDetail.content;
						this.authorInfo.userAvatar=this.defaultProfileImg;
						this.blog.commentCount=blogDetail.commentsCount;
						this.blog.viewCount=blogDetail.readCount;
						this.blog.viewCount++;
						this.blog.likeCount=blogDetail.likesCount;
						this.blog.collectCount=blogDetail.favoriteCount;
						this.blog.shareCount=blogDetail.shareCount;
						this.blog.postType= blogDetail.blogType;
						this.blog.blogTags=blogDetail.tags;
					}
					
				}else{
					uni.showToast({
					      title: "接受的数据发生异常",
					      icon: 'error',
						  duration:1000
					 });
					 setTimeout(() => {
					   uni.navigateBack();
					 }, 1000);
					 
				}
				//相关推荐
				if(data.relevantBlog){
					//相关推荐
					 data.relevantBlog.forEach(blog => {
					    // 对每个博客对象进行处理
					    //console.log("id比较",this.blog.id,this.blog.id!=blog.id,blog.id);  // 假设博客对象有一个 title 字段
					   if(this.blog.id!=blog.id){
						   const newblog={
							   id: blog.id,
							   username: blog.authorName,
							   postTitle: blog.title,
							   postIntroduce: blog.blogDescribe,
							   profileImg: "../../static/img/test4.jpg",
							   pictureImg: "../../static/img/pic5.jpg",
							   viewCount: blog.readCount,
							   likeCount: blog.likesCount,
							   collectCount: blog.favoriteCount,
							   commentCount: blog.commentsCount,
						   }
						   this.relatedBlogs.push(newblog);
					   }
					});
				}
				
				
				
			   }else {
				   let msg= '博客不存在';
				   if(result.msg){
					   msg=result.msg;
				   }
				  uni.showToast({
				        title: msg,
				        icon: 'error',
				  	  duration:1000
				   });
				   setTimeout(() => {
				     uni.navigateBack();
				   }, 1000);
			   }
			   return;
		   }
		   uni.showToast({
		         title: '博客请求失败',
		         icon: 'none'
		      });
		} catch (error) {
		  console.error("博客请求失败:", error);
		  uni.showToast({
		        title: '请求错误',
		        icon: 'none'
		     });
		}  
	 },
    goBack() {
      uni.navigateBack(); // 返回上一页
    },
    handleSearch() {
      // 搜索逻辑（未实现）
    },
	// 处理图片加载失败的情况
	onImageError(event) {
	    this.blog.profileImg = this.defaultProfileImg; // 图片加载失败时设置为默认图片
	 },
	 
	 changeFollow(){
	 			if(this.blog.isFocused==false){
					let userId=this.userId;
					if(!userId){
						userId=-1;
					}
	 				method.followUser(userId,this.authorInfo.userId,this.userId,this.token).then((origResult) => {
						
						const result=origResult.res.data;
						console.log(result);
						if(result){
							if(result.code===1){
								   this.blog.isFocused=true;
								     uni.showToast({
								    title:'关注成功',
								   	icon:"none",
								   	duration:500
								     })
								}
							return;
						}
						uni.showToast({
						      title: '关注失败',
						      icon: 'error',
							  duration:500
						   });
	 					
	 				})
	 				.catch((error) => {
	 					const result=error.res.data;
	 					if(result.error==='Unauthorized'){
	 						uni.showToast({
	 						    title: "还未登录", // 提示的内容
	 						    icon: 'error',   // 提示的图标，'error' 表示错误图标
	 						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
	 						});
	 						
	 						// 设置 2 秒后跳转到登录页面
	 						setTimeout(() => {
	 						    uni.navigateTo({
	 						        url: "/pages/login/login"  // 跳转的页面路径
	 						    });
	 						}, 1000); // 设置延迟 2 秒后跳转
							return;
	 					}
						
	 					uni.showToast({
	 					title:error.message||'关注失败',
	 					icon:"none",
	 					duration:500
	 					 })
	 				});
	 			}else{
	 				uni.showModal({
	 					title:"取消关注",
	 					content:"确定要取消关注吗？",
	 					cancelText:"算了",
	 					confirmText:"我要取关",
	 					success: (res) => {
	 						if(res.confirm){
								let userId=this.userId;
								if(!userId){
									userId=-1;
								}
	 						//向后端发送取消关注请求
	 						method.cancelFollowUser(userId,this.authorInfo.userId,this.userId,this.token).then((origResult) => {
								const result=origResult.res.data;
								console.log(result);
								if(result){
									if(result.code===1){
										   this.blog.isFocused=false;
										     uni.showToast({
										    title:'取消关注',
										   	icon:"none",
										   	duration:500
										     })
										}		
									return;
								}
								uni.showToast({
								      title: '取消关注失败',
								      icon: 'error',
									  duration:500
								   });
	 						})
	 						.catch((error) => {
								console.log(error);
								const result=error.res.data;
								
								if(result.error==='Unauthorized'){
									uni.showToast({
									    title: "还未登录", // 提示的内容
									    icon: 'error',   // 提示的图标，'error' 表示错误图标
									    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
									});
									
									// 设置 2 秒后跳转到登录页面
									setTimeout(() => {
									    uni.navigateTo({
									        url: "/pages/login/login"  // 跳转的页面路径
									    });
									}, 1000); // 设置延迟 2 秒后跳转
									return;
								}
								uni.showToast({
								title:error.message||'关注失败',
								icon:"none",
								duration:500
								 })
	 						});
	 						}else{
	 							return;
	 						}
	 					}
	 				})
	 			}
	 },
    // toggleFocus() {
    //   this.blog.isFocused = !this.blog.isFocused; // 切换关注状态
    // },

    goToTag(tag) {
      // 处理标签点击，跳转到标签页面
      uni.showToast({
        title: `跳转到标签: ${tag}`,
        icon: 'none',
      });
    },

    moreRelatedBlog() {
      // 更多相关博客逻辑（未实现）
	  
    },
    goBlogDisply(id) {
      const blog = this.relatedBlogs.find(post => post.id === id);
	  console.log("相关推荐"+id);
	  if(blog){
		  uni.navigateTo({
		    url: `/pages/blogArticleDisplay/blogArticleDisplay?id=${id}`
		  });
	  }
    },
	async like_dislike(isLike){
		try{
			//查询blog草稿的设置
			let data={
				 postId:this.blog.id,
				 userId:this.userId,
				 isLike:isLike
			}
			 let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"blogLikeOrDisLike",data,"/post/like-dislike");
			 console.log("点赞或踩的数据",result);
			 if(result){
			 	if(result.code===1){
					//const data=result.data;
					if(isLike==="true"){
						this.blog.isLiked = 1; // 点赞
						this.blog.likeCount++;
						uni.showToast({
						       title:"点赞成功", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'none', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
					}else{
						this.blog.isLiked = 2; // 不喜欢
						uni.showToast({
						       title:"踩成功", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'none', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
					}
				}else{
					if(result.error==='Unauthorized'){
						uni.showToast({
						    title: "还未登录", // 提示的内容
						    icon: 'error',   // 提示的图标，'error' 表示错误图标
						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						});
						
						// 设置 2 秒后跳转到登录页面
						setTimeout(() => {
						    uni.navigateTo({
						        url: "/pages/login/login"  // 跳转的页面路径
						    });
						}, 1000); // 设置延迟 2 秒后跳转
					}
				}
				return;
			 }
			 uni.showToast({
			        title:"请求失败，请重试", // 使用 error.message 作为提示信息，若没有则使用默认提示
			        icon: 'error', // 使用 'error' 图标
			        duration: 2000 // 持续时间
			    });
		}catch (error) {
		  console.error("点赞或踩发生异常:", error);
		   uni.showToast({
		          title: error.message || "点赞或踩发生错误", // 使用 error.message 作为提示信息，若没有则使用默认提示
		          icon: 'error', // 使用 'error' 图标
		          duration: 2000 // 持续时间
		      });
		}
	},
	async remove_like_dislike(){
		try{
			//查询blog草稿的设置
			let data={
				 postId:this.blog.id,
				 userId:this.userId,
			}
			 let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"removeUserLikeOrDislike",data,"/post/remove-like-dislike");
			 console.log("取消点赞或踩的数据",result);
			 if(result){
			 	if(result.code===1){
					//const data=result.data;
					if (this.blog.isLiked === 1) {
						this.blog.isLiked = 0; // 取消点赞
						this.blog.likeCount--;
						uni.showToast({
						       title:"取消点赞", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'none', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
					}
					if (this.blog.isLiked === 2) {
					  this.blog.isLiked = 0; // 取消不喜欢
					  uni.showToast({
					         title:"取消踩", // 使用 error.message 作为提示信息，若没有则使用默认提示
					         icon: 'none', // 使用 'error' 图标
					         duration: 1000 // 持续时间
					     });
					}
				}else{
					if(result.error==='Unauthorized'){
						uni.showToast({
						    title: "还未登录", // 提示的内容
						    icon: 'error',   // 提示的图标，'error' 表示错误图标
						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						});
						
						// 设置 2 秒后跳转到登录页面
						setTimeout(() => {
						    uni.navigateTo({
						        url: "/pages/login/login"  // 跳转的页面路径
						    });
						}, 1000); // 设置延迟 2 秒后跳转
					}
				}
				return;
			 }
			 uni.showToast({
			        title:"请求失败，请重试", // 使用 error.message 作为提示信息，若没有则使用默认提示
			        icon: 'error', // 使用 'error' 图标
			        duration: 2000 // 持续时间
			    });
		}catch (error) {
		  console.error("取消点赞或踩发生异常:", error);
		   uni.showToast({
		          title: error.message || "取消点赞或踩发生错误", // 使用 error.message 作为提示信息，若没有则使用默认提示
		          icon: 'error', // 使用 'error' 图标
		          duration: 2000 // 持续时间
		      });
		}
	},
	finishSelection(){
		
		this.closeFolderSelection();
		// 选中 selected 为 true 的文件夹
		const selectedFolderIds = this.folders
		    .filter(folder => folder.selected) // 过滤出 selected 为 true 的文件夹
		    .map(folder => folder.id); // 提取出这些文件夹的 id
		if(selectedFolderIds){
			if(selectedFolderIds.length===0){
			  this.processingCollection(selectedFolderIds,'cancelCollection');
			}else{
				this.processingCollection(selectedFolderIds,'changeFavorites');
			}
		}
	},
	async processingCollection(folderList,type){
		//processingCollection
		try{
			//查询blog草稿的设置
			let data={
				 postId:this.blog.id,
				 userId:this.userId,
				 folderList:folderList
			}
			 let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"processingCollection",data,"/post/processingCollection");
			 console.log("处理收藏的方法",result);
			 if(result){
			 	if(result.code===1){
					//const data=result.data;
					if(type==='cancelCollection'){
						 this.blog.isCollected = false; //取消收藏
						 this.countUserCollectedPost=0;
						 this.blog.collectCount +=  -1
						 uni.showToast({
						     title: "已取消收藏", // 提示的内容
						     icon: 'success',   // 提示的图标，'error' 表示错误图标
						     duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						 });
					}else if(type==='collect'){
						//成功几个收藏
						this.countUserCollectedPost=1;
						this.blog.isCollected = true; //收藏
						this.blog.collectCount +=  1 ; // 更新收藏数量
						this.animationTriggered = true; // 触发收藏动画
						uni.showToast({
						    title: "收藏成功", // 提示的内容
						    icon: 'success',   // 提示的图标，'error' 表示错误图标
						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						});
						setTimeout(() => {
						  this.animationTriggered = false; // 动画结束后重置
						}, 500); // 动画持续时间
						this.selectedFolder = this.defaultUserFolder.name;  // 设置当前收藏的文件夹（可以根据业务需求动态修改）
						this.showCollectModal = true;  // 显示收藏成功弹框
						//设置定时器，3秒后自动关闭提示框
						setTimeout(() => {
							 this.showCollectModal = false;
						}, 3000);  // 3秒后关闭提示框
					}else if(type==='changeFavorites'){
						//修改
						if(result.data){
							uni.showToast({
							    title: "更改收藏成功", // 提示的内容
							    icon: 'success',   // 提示的图标，'error' 表示错误图标
							    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
							});
						   console.log(result.data);
						   this.selectedFolder = result.data.join('，');;  // 设置当前收藏的文件夹（可以根据业务需求动态修改）
						   this.showCollectModal = true;  // 显示收藏成功弹框
						   this.countUserCollectedPost=result.data.length;
						   setTimeout(() => {
						   	 this.showCollectModal = false;
						   }, 3000);  // 3秒后关闭提示框
						}else{
							uni.showToast({
							    title: "返回的数据异常", // 提示的内容
							    icon: 'error',   // 提示的图标，'error' 表示错误图标
							    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
							});
						}
					}
				}else{
					if(result.error==='Unauthorized'){
						uni.showToast({
						    title: "还未登录", // 提示的内容
						    icon: 'error',   // 提示的图标，'error' 表示错误图标
						    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
						});
						
						// 设置 2 秒后跳转到登录页面
						setTimeout(() => {
						    uni.navigateTo({
						        url: "/pages/login/login"  // 跳转的页面路径
						    });
						}, 1000); // 设置延迟 2 秒后跳转
					}
				}
				return;
			 }
			 uni.showToast({
			        title:"请求失败，请重试", // 使用 error.message 作为提示信息，若没有则使用默认提示
			        icon: 'error', // 使用 'error' 图标
			        duration: 2000 // 持续时间
			    });
		}catch (error) {
		   uni.showToast({
		          title: error.message || "处理收藏发生异常", // 使用 error.message 作为提示信息，若没有则使用默认提示
		          icon: 'error', // 使用 'error' 图标
		          duration: 2000 // 持续时间
		      });
		}
	},
	async searchFavorites(count,type){
	//查询文件夹   加载 offset和count	
	   return new Promise((resolve) => {
	   	console.log("type",type,"offset",this.offset);
	   	if(this.fetchDataOnce){
	   		this.fetchDataOnce=false;//开始重新查询
	   	}
	   	this.getFavoritesData(this.offset,count,this.blog.id,this.userId)
	   	    .then(result => {
	   			//console.log("网络请求的文件夹的数据",result);
	   	        if(result){
	   				if(result.code===1){
	   					console.log("网络请求的文件夹的数据11",result.data);
	   					 const newFavorites= result.data.map((item) => {
	   						 
	   						 const newFolder={
	   						 	id: item.folderId, 
	   							name: item.folderName, 
	   							isDefault: item.isDefault!=null,
	   							contentCount: item.postNum, 
	   							visibility: item.visibility,
	   							selected: item.isSelected
	   						 }
	   						 return newFolder; 
	   						});
	   										
	   						if(!newFavorites){
	   							newFavorites=[];
	   						}
	   						if (type === 'loadMore') {
	   						    console.log("index加载数据");
	   						    newFavorites.forEach(newFolder => {
	   						        const index = this.folders.findIndex(f => f.id === newFolder.id);
	   						        if (index > -1) {
	   						             this.folders.splice(index, 1, newFolder);
	   						        } else {
										if(newFolder.selected){
										this.folders.splice(1, 0, newFolder); // 在第二个位置插入新元素
										}else{
	   						            this.folders.push(newFolder);
										}
	   						        }
	   						    });
	   						 }else if(type==="refresh"){
	   							 console.log("index刷新数据");
	   							this.folders=newFavorites;
	   						}
	   						this.offset+=newFavorites.length;
	   						//console.log("当前offset",this.offset);
	   						resolve(newFavorites); 
	   					
	   					// resolve([]);
	   				}else{
	   					uni.showToast({
	   					      title: '文件夹数据请求失败',
	   					      icon: 'none',
	   						  duration:1000
	   					   });
	   					resolve([]);
	   				}
	   				return;
	   			}else{
	   				
	   				if(result.error==='Unauthorized'){
	   					uni.showToast({
	   					    title: "还未登录", // 提示的内容
	   					    icon: 'error',   // 提示的图标，'error' 表示错误图标
	   					    duration: 1000   // 持续时间，单位是毫秒，2000 毫秒即 2 秒
	   					});
	   					
	   					// 设置 2 秒后跳转到登录页面
	   					setTimeout(() => {
	   					    uni.navigateTo({
	   					        url: "/pages/login/login"  // 跳转的页面路径
	   					    });
	   					}, 1000); // 设置延迟 2 秒后跳转
	   					resolve([]);
	   					return;
	   				}
	   				uni.showToast({
	   				      title: '文件夹数据请求异常',
	   				      icon: 'none',
	   					  duration:1000
	   				   });
	   				resolve([]);
	   			}
	   			//this.recommendedPostRefresh=false;
	   	    })
	   	    .catch(error => {
	   			resolve([]);
	   	        console.error('Error fetching data:', error);
	   	    });
	   	//resolve([]);
	       });	
	},
	async getFavoritesData(offset,count,postId,userId) {
	    const data = {
			userId:userId,
			postId:postId,
			offset:offset,
	        count: count
	    };
	    try {
	        let  result = await request.sendUniPostRequestByNetWork(this.userId,this.token, "selectFavorites", data, "/post/selectFavorites");
			//console.log("网络请求数据",result);
	        return result; // 返回结果
	    } catch (error) {
	        console.error('Error fetching data:', error);
	        throw error; // 抛出错误以便调用者处理
	    }
	},
   async toggleLike() {
      if (this.blog.isLiked === 1) {
		await this.remove_like_dislike();
        // this.blog.isLiked = 0; // 取消点赞
        // this.blog.likeCount--;
      } else {
		 await this.like_dislike("true");
        // this.blog.isLiked = 1; // 点赞
        // this.blog.likeCount++;
      }
    },
   async toggleDislike() {
      if (this.blog.isLiked === 2) {
		await this.remove_like_dislike();
        // this.blog.isLiked = 0; // 取消不喜欢
      } else {
		await this.like_dislike("false");
        // this.blog.isLiked = 2; // 不喜欢
      }
    },
   async toggleCollect() {
		//切换收藏状态 
		if(this.blog.isCollected){
			//取消收藏
		  if(this.countUserCollectedPost===1){
		  this.processingCollection([],'cancelCollection');
		  }else{
			  //this.sh
			  this.isShowFolderSelection=true;
			  this.fetchDataOnce=true;
		  }
		}else{
			const newFolder=[];
			if(this.defaultUserFolder){
			newFolder.push(this.defaultUserFolder.id);
			}else{
				newFolder.push(-1);
			}
			//收藏
			this.processingCollection(newFolder,'collect');
		}
    },

    closeModal() {
      this.showCommentModal = false; // 关闭评论模态框
    },

    openCommentModal() {
      this.showCommentModal = true; // 打开评论模态框
    },

    fetchComments(count) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const newComments = Array.from({ length: count }, (_, i) => ({
            id: i + this.comments.length + 1,
            parentId: null,
            replyToId: 1,
            replyToName: '徐海东',
            userId: i + this.comments.length + 1,
            username: `用户${i + this.comments.length + 1}`,
            profileImage: `../../static/img/test${i + 2}.jpg`,
            isLiked: Math.floor(Math.random() * 2),
            likesCount: Math.floor(Math.random() * 100),
            commentText: `这是一条示例评论，内容 ${i + this.comments.length + 1}。`,
            replyCount: Math.floor(Math.random() * 20),
            createdAt: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString(),
            userIp: '火星',
          }));
          this.comments.push(...newComments); // 将新评论添加到现有评论列表
          resolve(newComments);
        }, 1000);
      });
    },

    fetchNetworkReplyComments(count, commentId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const newReplyComments = Array.from({ length: count }, (_, i) => ({
            id: count + i,
            parentId: commentId,
            replyToId: 11,
            replyToName: '徐海东',
            userId: i + this.comments.length + 1,
            username: `用户${i + this.comments.length + 1}`,
            profileImage: `../../static/img/test${i + 2}.jpg`,
            isLiked: Math.floor(Math.random() * 2),
            likesCount: Math.floor(Math.random() * 100),
            commentText: `这是一条回复评论，内容 ${i + this.comments.length + 1}。`,
            replyCount: Math.floor(Math.random() * 20),
            createdAt: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString(),
            userIp: '火星',
          }));
          resolve(newReplyComments);
        }, 1000);
      });
    },

    async handleNetworkLike(commentId) {
      return new Promise((resolve) => {
        resolve(true); // 假设点赞成功
      });
    },

    async handleNetworkDislike(commentId) {
      return new Promise((resolve) => {
        resolve(true); // 假设不喜欢成功
      });
    },

    removeComment(id) {
      this.comments = this.comments.filter(comment => comment.id !== id); // 删除评论
    },

    addComment(comment) {
      console.log(comment); // 提交评论的逻辑（未实现）
    }
  }
}
</script>


<style lang="scss">
.whole {
  height: 100%; /* 使整个容器充满屏幕高度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  background-color: #f0f0f0; /* 背景颜色 */
.modal-background {
  position: fixed; /* 固定定位，覆盖整个页面 */
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.3 */
  z-index: 998; /* 背景层次在内容下方 */
  opacity: 0;
  transform: translateY(100%);
  transition:  opacity 0.1s ease; /* 添加过渡效果 */
}
.create-folder-modal-background{
	position: fixed; /* 固定定位，覆盖整个页面 */
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 10000; /* 背景层次在内容下方 */
	opacity: 0;
	transform: translateY(100%);
	transition:  opacity 0.1s ease; /* 添加过渡效果 */
	  background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，透明度为0.3 */
}
.create-folder-modal-background.fade-in{
	transform: translateY(0); /* 滑入 */
	opacity: 1; /* 完全可见 */
}

.modal-background.fade-in {
  transform: translateY(0); /* 滑入 */
  opacity: 1; /* 完全可见 */
}
/* 滑出效果 */
.create-folder-modal-background.fade-out{
	transform: translateY(100%); /* 滑入 */
	opacity: 0; /* 完全透明 */
}
.modal-background.fade-out {
	transform: translateY(100%); /* 滑入 */
    opacity: 0; /* 完全透明 */
}

.create-folder-modal{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end; /* 从底部对齐 */
	z-index: 10001; /* 确保模态框位于最上层 */
	/* 初始状态为隐藏 */
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
	//background-color: red;
	.create-folder-content{
		  background-color: white;
		//background-color:;
		 padding: 20rpx;
		 border-radius: 30rpx;
		 width: 100%;
		// height: 70%; /* 最大高度 */
		 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		 display: flex;
		 flex-direction: column; /* 纵向布局 */
		 position: relative;
		 .header{
			
		 	padding: 10rpx;
		 	height: 50rpx;
		 	display: flex; /* 使用flex布局 */
		 	align-items: center; /* 垂直居中对齐 */
		 	 justify-content: space-between; /* 左右对齐 */
		 	.iconfont{
		 		margin-right: 10rpx;
		 			//background-color: red;
		 		  color: #ccc;
		 		  font-size: 45rpx;
		 		  width: 45rpx;
		 		  height: 45rpx;
		 		  text-align: center;
		 		  line-height: 45rpx;
		 	}
		 	.modal-title {
		 	    flex: 1; /* 占据剩余空间 */
		 	    text-align: center; /* 中间对齐 */
		 	    font-size: 18px; /* 字体大小 */
		 	}
		 	.save-button{
		 		color: #000;
		 		border: 1rpx solid #ccc;
		 		width: 100rpx;
		 		height: 50rpx;
		 		line-height: 50rpx;
		 		text-align: center;
		 	    border-radius: 20rpx; /* 圆角效果 */
		 	    cursor: pointer; /* 鼠标指针样式 */
		 	}
		 }
		 .folder-name-container {
		   // background-color: white;
		   display: flex;
		   align-items: center;
		   justify-content: space-between; /* 让内容分布在两侧 */
		   border-bottom: 1rpx solid #ccc;
		   margin-top: 10px;
		   padding: 0 10rpx;
		   .char-count {
		     font-size: 14px;
		     color: #888;
		   }
		   .folder-name-input {
		    // width: 80%; /* 输入框占据大部分宽度 */
			 flex: 1;
		     padding: 10px;
		     font-size: 16px;
		     //border-radius: 4px;
		   }
		 }
		 .folder-description-container {
			// background-color: white;
		   margin-top: 10px;
		   .folder-description-input {
		     width: 100%;
		     padding: 10px;
		     font-size: 16px;
		     height: 100px;
		     border-bottom: 1rpx solid #ccc;
		     //border-radius: 4px;
			 box-sizing: border-box;
		     resize: none;
		   }
		   
		   .description-count {
		     margin-top: 5px;
		     text-align: right;
		     font-size: 12px;
		     color: #888;
		   }
		 }
		.default, .no-public-visibility,.public-visibility {
			// background-color: white;
		   display: flex;
		   justify-content: space-between; /* 让文本和选择框分别位于左右 */
		   align-items: center; /* 垂直居中 */
		   margin:10px 0px; /* 上边距，根据需求调整 */
		   padding: 0 10px;
		   .visibility-text {
		     font-size: 20px;
		     color: #333;
		   }
		   .select-icon {
		     display: flex;
		     align-items: center;
			 justify-content: center;
		     .icon {
		       width: 20px;
		       height: 20px;
		     }
		   }
		 }
		 // .no-public-visibility{
			//  border-bottom: 1rpx solid #ccc; 
		 // }
		 
		
		 
		 

		 
		 
		 
		

	}
}
 /* 滑入效果 */
  .create-folder-modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  /* 滑出效果 */
  .create-folder-modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }



.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 从底部对齐 */
  z-index: 9999; /* 确保模态框位于最上层 */
  /* 初始状态为隐藏 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
  /* 内容区域样式 */
  .modal-content{
      background-color:white;
      padding: 20rpx;
      border-radius: 30rpx;
      width: 100%;
     // height: 70%; /* 最大高度 */
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column; /* 纵向布局 */
      position: relative;
	  .header{
	  	padding: 10rpx;
	  	height: 50rpx;
	  	display: flex; /* 使用flex布局 */
	  	align-items: center; /* 垂直居中对齐 */
	  	 justify-content: space-between; /* 左右对齐 */
	  	.iconfont{
	  		margin-right: 10rpx;
	  			//background-color: red;
	  		  color: #ccc;
	  		  font-size: 45rpx;
	  		  width: 45rpx;
	  		  height: 45rpx;
	  		  text-align: center;
	  		  line-height: 45rpx;
	  	}
	  	.modal-title {
	  	    flex: 1; /* 占据剩余空间 */
	  	    text-align: center; /* 中间对齐 */
	  	    font-size: 18px; /* 字体大小 */
	  	}
	  	.newly-built-button {
	  		color: #000;
	  		border: 1rpx solid #ccc;
	  		width: 100rpx;
	  		height: 50rpx;
	  		line-height: 50rpx;
	  		text-align: center;
	  	    border-radius: 20rpx; /* 圆角效果 */
	  	    cursor: pointer; /* 鼠标指针样式 */
	  	}
	  }
	  .folder-list-container {
		height: 400rpx;
	    flex-grow: 1; /* 使文件夹列表区域自适应填充剩余空间 */
	    overflow-y: auto; /* 允许垂直滚动 */
	    padding: 10rpx;
		.folder-item {
		  display: flex;
		  justify-content: space-between; /* 左右布局 */
		  padding: 10px;
		  border-bottom: 1px solid #ddd;
		  .left {
			display: flex;
			flex-direction: column; /* 纵向布局 */
			position: relative;
			//background-color: red;
		    flex: 1; /* 左侧区域占据剩余空间 */
			.folder-header {
			  display: flex;
			  justify-content: space-between; /* 左右分布：名称和默认标签 */
			  align-items: center;
			  .folder-info {
			    display: flex;
			    align-items: center;
			    .folder-name {
			      font-weight: bold;
			      color: #333;
			      margin-right: 10px;
			    }
			    
			    .default-tag {
			      background-color: #4caf50;
			      color: white;
			      padding: 2px 8px;
			      border-radius: 4px;
			      font-size: 12px;
			    }
			    
			  }
			}
			.folder-details {
			//background-color: #0056b3;
			  display: flex;
			  //justify-content: space-between; /* 内容与可见性状态分开显示 */
			  align-items: center;
			  margin-top: 5px;
			  font-size: 14px;
			  color: #777;
			  .folder-content {
			    margin-right: 10px;
			  }
			  
			  .visibility-status {
			    font-style: italic;
			  }
			}
			
		  }
		  .right {
			//background-color: #007BFF;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    .select-icon {
				display: flex;
				align-items: center;
				justify-content: center;
		      cursor: pointer;
		      .icon {
		        width: 20px;
		        height: 20px;
		      }
		    }
		  }
		}
		
	  }
	  .finish-button {
	    padding: 20rpx;
	    text-align: center;
	  //  background-color: #007aff;
	   color: #000;
	    font-size: 25rpx;
	    cursor: pointer;
	    //font-weight: bold;
	  }
  }
}
  /* 滑入效果 */
  .modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  /* 滑出效果 */
  .modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }
  
  /* 自定义导航栏样式 */
  .custom-navbar {
    padding-top: var(--status-bar-height); /* 状态栏高度 */
    font-size: 1.2rem;
    height: 80rpx; /* 导航栏高度 */
    width: 100%;
    background-color: #f8f8f8; /* 背景颜色 */
    position: sticky; /* 固定在页面顶部 */
    top: 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    /* 左侧部分 */
    .left {
      position: absolute;
      left: 0;
      height: 80rpx;
      width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        color: #000;
        font-size: 40rpx;
        width: 50%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }

    /* 中间部分 */
    .center {
      color: #000;
      font-family: "楷体", "SimSun", "宋体", sans-serif; /* 设置字体 */
    }

    /* 右侧部分 */
    .right {
      position: absolute;
      right: 0;
      height: 80rpx;
      width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      .iconfont {
        color: #000;
        font-size: 50rpx;
        width: 50%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }

  /* 内容部分 */
  .content {
	padding: 10px;
	box-sizing: border-box;
    flex: 1; /* 占满剩余空间 */
    background-color: #f8f8f8;
    overflow-y: auto; /* 内容部分可以滚动 */
    margin-bottom: 100rpx; /* 底部间距 */

    /* 帖子标题 */
    .postTitle {
      margin-bottom: 20rpx;
      padding-left: 20rpx;
      color: #000;
      font-size: 1.3rem;
      margin-top: 20rpx;
    }

    /* 帖子信息 */
    .postMsg {
	  margin-top: 30rpx;
      display: flex;
      flex-direction: column; /* 垂直排列 */

      /* 用户信息展示 */
      .userDisplay {
		
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;

        .profile {
          margin-left: 10rpx;
          width: 80rpx; /* 头像宽度 */
          height: 80rpx; /* 头像高度 */
          border-radius: 50%; /* 圆形头像 */
          background-color: #ccc; /* 默认头像背景色 */
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }

        .text {
          margin-left: 10rpx;
          flex: 1;
          margin-right: 10rpx;
          display: flex;
          flex-direction: column; /* 垂直排列 */
          overflow: hidden; /* 隐藏超出部分 */

          .username {
            white-space: nowrap; /* 不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            margin-left: 5rpx;
          }

          /* 帖子类型标签 */
          .postType {
			//box-sizing: border-box;
             width:auto;
            display: inline-block; /* 使标签适应内容 */
            background-color: #e0f7fa; /* 标签背景色 */
            color: #00796b; /* 标签字体颜色 */
            border: 1rpx solid #00796b; /* 标签边框颜色 */
            border-radius: 25rpx; /* 圆角边框 */
            padding: 5rpx 10rpx; /* 内边距 */
            font-size: 25rpx; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            text-align: center; /* 文本居中 */
            margin: 5rpx; /* 标签间距 */
          }
        }

        /* 关注按钮 */
        .focus {
          width: 120rpx;
          cursor: pointer; /* 鼠标悬停时显示手型 */
          margin-right: 20rpx;
          font-size: 20rpx;
          height: 70rpx;
          line-height: 70rpx;
          border: 1rpx solid #ccc;
          border-radius: 60rpx;
        }
      }

      /* 阅读部分 */
      .read {
		font-size: 14px;
        padding: 20rpx;
		//margin-bottom: 20rpx;
      }
	 
    }
	.bologContent{
		//background-color: red;
		padding: 20rpx;
	}
    /* 标签列表 */
    .tag-list {
	  margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap; /* 允许标签换行 */
      justify-content: flex-start; /* 左对齐标签 */
      padding: 5rpx; /* 标签列表的内边距 */

      .tag-item {
        background-color: #007bff; /* 标签背景色 */
	   //border: 1rpx solid #007bff;
       color: white; /* 标签文字颜色 */
        padding: 4rpx 10rpx; /* 标签内边距 */
        border-radius: 10rpx; /* 标签圆角 */
        margin: 10rpx; /* 标签间距 */
        cursor: pointer; /* 鼠标悬停时显示指针 */
        font-size: 24rpx; /* 标签字体大小 */
        transition: background-color 0.3s, transform 0.2s; /* 动画效果 */
		//font-size: 14px;
        &:hover {
          background-color: #0056b3; /* 悬停时背景色 */
          transform: scale(1.03); /* 放大效果 */
        }
      }
    }

    /* 相关博客部分 */
    .relatedBlog {
      margin-top: 20rpx;
      display: flex;
      flex-direction: column; /* 垂直排列 */
	  justify-content: center;
      /* 相关博客头部 */
      .relatedHeader {
       // margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50rpx;

        .text {
          padding-left: 20rpx;
        }

        /* 更多相关博客 */
        .more {
          margin-right: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 23rpx;

          .iconfont {
            font-size: 23rpx;
            width: 23rpx;
            height: 23rpx;
            text-align: center;
            line-height: 23rpx;
          }
        }
      }

      /* 相关博客列表 */
      .relatedBlogList {
        padding: 20rpx;

        .relatedBlogShow {
          display: flex;
          flex-direction: column; /* 垂直排列 */
          border-bottom: 1rpx solid rgba(0, 0, 0, 0.2); /* 透明底部边框 */

          .blogText {
            display: flex;
            align-items: center;
            padding: 10rpx;
            margin-bottom: 10rpx;

            .text {
              flex: 1;
              margin-left: 10rpx;

              &.fullWidth {
                flex: 0 0 90%; /* 当没有图片时占据 90% 的宽度 */
              }

              .blogTitle {
                font-size: 1.1rem;
                display: -webkit-box; /* 使用 Flexbox */
                -webkit-box-orient: vertical; /* 垂直排列 */
                -webkit-line-clamp: 2; /* 限制为两行显示 */
                overflow: hidden;
                text-overflow: ellipsis; /* 超出部分显示省略号 */
              }

              .blogIntroduce {
                font-size: 20rpx;
                color: #666;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .picture {
              width: 20%;
              height: 80rpx;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
            }
          }

          .blogMsg {
            margin-bottom: 20rpx;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            margin-left: 20rpx;

            .username,
            .read,
            .commentCount {
              margin-right: 20rpx;
            }
          }
        }

        .noRelatedBlog {
          height: 100rpx;
          color: #ccc;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }



/*收藏成功提示框*/
/* 收藏成功提示框 */
.collect-modal {
  position: fixed;
  //padding: 10rpx;
    border-radius: 15rpx;
  bottom: 120rpx; /* 距离底部导航栏的上方距离，可以根据需要调整 */
  left: 10rpx;
  right: 10rpx;
  //width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0  10px;
  box-sizing: border-box;
  z-index: 1000;
  transition: opacity 0.3s ease-in-out;
  .collect-modal-content {
    //background: #fff;
    display: flex;
     justify-content: space-between; /* 左右对齐 */
     align-items: center;
	 width: 100%;
	 padding: 10px;
	 .left {
	   display: flex;
	   flex-direction: column; /* 垂直排列左侧内容 */
	   justify-content: center;
	   .title {
	     font-size: 20px;
	     color: white;
	   }
	   
	   .folder {
	     font-size: 12px;
	     color: white;
	     margin-top: 10rpx;
	   }
	 }
	
	.right {
	  display: flex;
	  align-items: center;
	  cursor: pointer;
	  .change-text {
		//width: 100rpx;
		text-align: center;
	    font-size: 14px;
	    color: white;
	    margin-right: 8rpx; /* 更改文本与箭头之间的间距 */
	  }
	  .arrow {
	    color: white;
	    font-size: 14px;
	    width: 14px;
	    height: 14px;
	   // text-align: center;
	    //line-height: 24px;
	  }
	}

  }
}







  /* 底部导航栏 */
  .bottom-navigation-bar {
    height: 100rpx;
    width: 100%;
    background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 上方阴影 */

    /* 点赞和点踩区域 */
    .likeAndDislike {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx;
      border-radius: 15rpx;
      background-color: #f9f9f9;

      .like,
      .disLike {
        display: flex;
        align-items: center;
        margin: 0 10px;
      }

      .iconfont {
        text-align: center;
        font-size: 40rpx;
        height: 40rpx;
        width: 40rpx;
        line-height: 40rpx;
        margin-right: 10rpx;
        transition: color 0.2s; /* 动画效果 */
      }

      .divider {
        width: 3rpx;
        height: 40rpx;
        background-color: #888;
      }

      .liked {
        color: red; /* 点赞时的颜色 */
        animation: pulse 0.5s; /* 点赞时的动画 */
      }

      .disliked {
        color: blue; /* 不认同时的颜色 */
        animation: pulse 0.5s;
      }

      /* 点赞动画效果 */
      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }
    }

    /* 评论、收藏、分享按钮 */
    .comment,
    .collect,
    .share {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      cursor: pointer;
      transition: transform 0.2s;

      .iconfont {
        font-size: 40rpx;
        height: 40rpx;
        width: 40rpx;
        line-height: 40rpx;
        margin-bottom: 5rpx;
      }

      .count {
        margin-left: 5rpx;
        font-size: 28rpx;
        color: #333;
      }

      .iconfont.active {
        color: #007BFF;
        transform: scale(1.1); /* 已收藏时图标放大 */
      }
    }
  }
}
</style>
